<template>
    <div class="card" style="display: flex;">
        <div>
            <el-input style="width: 240px;" v-model="data.searchname" placeholder="请输入管理员编号或姓名查询"
                prefix-icon="Search"></el-input>
            <el-button style="margin-left: 10px;" type="primary" @click="load()">查询</el-button>
            <el-button style="margin-left: 10px;" @click="reset()">重置</el-button>
        </div>
        <div style="margin-left: auto;">
            <el-button style="margin-left: 10px;" color="green" @click="add()">新增管理员</el-button>
        </div>
    </div>

    <div class="card">
        <el-table :data="data.adminlist" stripe>
            <el-table-column label="管理员账号" prop="username" />
            <el-table-column label="姓名" prop="adminName" />
            <el-table-column label="电话" prop="adminPhone" />
            <el-table-column label="操作">
                <template #default="scoped">
                    <el-button type="primary" :icon="Edit" @click="adminInfo(scoped.row)" circle></el-button>
                    <el-button type="danger" :icon="Delete" @click="deleteAdmin(scoped.row)" circle></el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 15px;">
            <el-pagination v-model:current-page="data.pageNumber" v-model:page-size="data.pageSize"
                :page-sizes="[1, 5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="data.total"
                @size-change="load()" @current-change="load()" />
        </div>
    </div>

    <el-dialog title="管理员信息" v-model="data.formVisable" width="500">
        <el-form ref="formRef" :rules="data.rules" :model="data.form" :validate-on-rule-change="false">
            <el-form-item v-if="isadd" label="管理员编号 ">
                <el-input v-model="data.form.adminId" disabled></el-input>
            </el-form-item>
            <el-form-item label="管理员姓名 " prop="adminName">
                <el-input v-model="data.form.adminName"></el-input>
            </el-form-item>
            <el-form-item label="管理员电话 " prop="adminPhone">
                <el-input v-model="data.form.adminPhone"></el-input>
            </el-form-item>
            <el-form-item label="管理员账号 " prop="username">
                <el-input v-model="data.form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码 " prop="password">
                <el-input type="password" v-model="data.form.password" show-password></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleCancle()">取消</el-button>
                <el-button type="primary" @click="handleConfirm()">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import request from '@/utils/request';
import { Edit, Delete } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { nextTick, reactive, ref } from 'vue';


const data = reactive({
    pageNumber: 1,
    pageSize: 5,
    total: 0,
    formVisable: false,
    adminlist: [],
    searchname: '',
    isadd: false,//如果是新增管理员，则为false
    form: {
        adminId: '',
        adminPhone: '',
        username: '',
        password: '',
        adminName: '',
    },
    rules: {
        adminName: [
            { required: true, message: '请输入管理员姓名', trigger: ['change', 'blur'] },
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: ['change', 'blur'] }
        ],
        username: [
            { required: true, message: '请输入账号', trigger: ['change', 'blur'] },
            { pattern: /^[A-Za-z0-9]{6,10}$/, message: '请输入有效的账号', trigger: ['change', 'blur'] }
        ],
        password: [
            { required: true, message: '请输入密码', trigger: ['change', 'blur'] },
            { pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d.@]{6,20}$/, message: '密码必须为6-20位，包含大小写字母和数字，可以包含.和@', trigger: ['change', 'blur'] }
        ],
        adminPhone: [
            { required: true, message: '请输入手机号', trigger: ['change', 'blur'] },
            { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: ['change', 'blur'] }
        ],
    }

})
const formRef = ref()
const load = () => {//加载所有员工
    request.get('/admin/searchPage', {
        params: {
            pageNumber: data.pageNumber,
            pageSize: data.pageSize,
            adminName: data.searchname
        }
    }).then(res => {
        data.adminlist = res.data.list
        data.total = res.data.total
    })
}
load()
const adminInfo = (row) => {//打开员工个人详细信息
    data.formVisable = true
    data.isadd = true
    data.form = { ...row }
}
const add = () => {//打开新增管理员信息界面
    data.formVisable = true
    nextTick(() => {
        formRef.value.resetFields(); // 重置表单
    })
    data.form = {}
    data.isadd = false
}
const deleteAdmin = (row) => {//删除管理员
    ElMessageBox.confirm('删除数据后无法恢复，确认删除？', { type: 'warning' }).then(() => {
        request.post('admin/delete', row).then(res => {
            if (res.code = '200') {
                ElMessage.success("删除成功")
                load()
            }
            else {
                ElMessage.error(res.message)
            }
        })
    }).catch()
}
const reset = () => {
    data.searchname = ''
    load()
}

const handleCancle = () => {
    data.formVisable = false
    data.form = {}
}
const handleConfirm = () => {//修改或新增员工信息
    formRef.value.validate((valid) => {
        if (!valid) {
            ElMessage.error('请填写完整信息')
            return
        }
        else {
            console.log(data.form)
            //根据员工编号判断是修改还是新增
            if (data.form.adminId !== null && data.form.adminId !== ''&&data.form.adminId !== undefined) {
                //修改管理员信息
                request.post('/admin/update', data.form).then(res => {
                    if (res.code === '200') {
                        load()
                        ElMessage.success("更新成功")
                    }
                    else {
                        ElMessage.error(res.message)
                    }
                })
            }
            else {
                //添加管理员信息
                request.post('/admin/add', data.form).then(res => {
                    if (res.code === '200') {
                        load()
                        ElMessage.success("添加成功")
                    }
                    else {
                        ElMessage.error(res.message)
                    }
                })
            }
            data.formVisable = false
            data.form = {}
        }
    })

}
</script>

<style scoped></style>